<template>
    <view class="pages">
        <view class="components" @click.stop="navInfo">
        <view class="unread" v-if="dataDetail && unread"></view>
        <view class="header">
            <view class="tips" v-if="dataDetail.jo_phase">{{ dataDetail.jo_phase }}</view>
            <view class="project_name">{{ dataDetail.title || dataDetail.jo_project || ''}}</view>
            <img @click.stop="onCollect" v-if="isStar" class="icon" :src="`https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/${dataDetail.iscollect == 1 ? 'instar' : 'star'}_icon.png`" />
        </view>
        <view class="main">
            <view class="main_black">
                <view class="main_title">{{ dataDetail.industry_direction || '' }}</view>
                <view class="main_text">产业类型</view>
            </view>
            <view class="solid"></view>
            <view class="main_black ">
                <view class="main_title">{{ dataDetail.area || '' }}</view>
                <view class="main_text">意向区域</view>
            </view>
            <view class="solid"></view>
            <view class="main_black">
                <view class="main_title">{{ dataDetail.jo_investment || '' }}亿元</view>
                <view class="main_text">投资金额</view>
            </view>
        </view>
        <view class="footer">
            <view class="company_name">{{ dataDetail.fullname || ''}}</view>
            <view class="matching">
                <view class="matching_title">匹配度</view>
                <view class="number">{{ dataDetail.jo_matching_degree }}<span style="font-size: 20rpx">%</span></view>
            </view>
        </view>
    </view>
    </view>

</template>

<script>
var app = getApp()
    export default {
        props: {
            unread: {
                type: Boolean,
                default: false
            },
            dataDetail: {
                type: Object,
                default: {}
            },
            isStar: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {

            }
        },
        methods: {
            onCollect() {
                const params = {
                    uid: uni.getStorageSync('uid'),
                    cid: this.dataDetail.id,
                    type: 2
                }
                itemDel(params).then(res => {

                })

                this.$emit('onResetting')
            },
            navInfo() {
                this.$emit('onClick', this.dataDetail)
            }
        },
        created() {
            // console.log(this.dataDetail, 'dataDetail')
        }
    }
</script>

<style scoped lang="scss">
.pages {
    box-sizing: border-box;
    padding-bottom: 12rpx;
}
.components {
    width: 100%;
    height: 240rpx;
    background: white;
    border-radius: 16rpx;
    padding: 20rpx 16rpx;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .unread {
        position: absolute;
        width: 12rpx;
        height: 12rpx;
        background: red;
        border-radius: 6rpx;
        left: 8rpx;
        top: 8rpx;
    }
    .header {
        width: 100%;
        height: 45rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .tips {
            width: 66rpx;
            height: 30rpx;
            border-radius: 15rpx;
            background: #5162fd;
            color: white;
            line-height: 30rpx;
            text-align: center;
            font-size: 20rpx;
            margin-right: 8rpx;
        }
        .project_name {
            width: 100%;
            height: 45rpx;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            color: #494949;
            line-height: 45rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            flex: 1;
        }
        .icon {
            width: 40rpx;
            height: 40rpx;
        }
    }
    .main {
        width: 100%;
        height: 76rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .border {
            border-left: 1rpx solid #e2e2e2;
            border-right: 1rpx solid #e2e2e2;
        }
        .solid {
            width: 1rpx;
            height: 46rpx;
            background: #e2e2e2;
        }
        .main_black {
            width: 33%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            .main_title {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #494949;
                line-height: 18px;
                overflow: hidden;
                height: 33rpx;
                white-space: nowrap;
                width: 100%;
                text-overflow: ellipsis;
                padding: 0 10rpx;
                box-sizing: border-box;
            }
            .main_text {
                font-size: 24rpx;
                font-weight: 400;
                color: #9B9B9B;
                width: 100%;
                padding: 0 10rpx;
                box-sizing: border-box;
                margin-top: 9rpx;
            }
        }
    }
    .footer {
        width: 100%;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .company_name {
            width: 70%;
            text-align: left;
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: black;
            line-height: 26rpx;
        }
        .matching {
            display: flex;
            align-items: center;
            .matching_title {
                font-size: 24rpx;
                font-weight: 400;
                color: #9B9B9B;
                margin-right: 10rpx;
            }
            .number {
                font-size: 36rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                color: #9F00FF;
            }
        }
    }
}

</style>
